<template>
  <div class="center-flex">
    <div class="login-form" @keyup.enter="login()">
    <h3>欢迎登录</h3>
    <!-- 账号输入框 -->
    <el-input v-model="account" placeholder="请输入账号" />
    
    <!-- 密码输入框 -->
    <el-input v-model="password" placeholder="请输入密码" type="password"/>

    <div style="display: flex; align-items: center;">
  <!-- 验证码输入框 -->
  <el-input v-model="checkCode" placeholder="请输入验证码" />
  <!-- 验证码图片 -->
   <div class="captcha">
    <img :src="captchaUrl" @click="refreshCode" style="margin-left: 10px;"/>
   </div>
    
  
  </div>

    <div class="container">
    <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
    <el-link type="primary" class="forgot-password" @click="handleForgotPassword">忘记密码？</el-link>
  </div>

    <!-- 登录按钮 -->
    <el-button type="primary" class="long-button" @click="login()">登录</el-button>
    <el-link style="color:chocolate; font-size: 14px; margin-top: 10px;" @click="register">还没有账号？点击注册</el-link>
  </div>
  </div>


  <!-- 忘记密码及注册对话框 -->
  <el-dialog :title=title v-model="open" width="500px" append-to-body>
    <el-form-item label="该项目作者是？" prop="author" label-width="150px" v-show="title==='忘记密码'">
          <el-input v-model="form.author" placeholder="请输入作者" />
        </el-form-item>
      <el-form :model="form" label-width="80px">
        <el-form-item label="账号" prop="account" v-show="showPwdInput||title==='用户注册'">
          <el-input v-model="form.number" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item :label="pwdLabel"  prop="pwd" v-show="showPwdInput||title==='用户注册'">
          <el-input v-model="form.pwd" placeholder="请输入新密码" type="password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwd1" v-show="showPwdInput||title==='用户注册'">
          <el-input v-model="form.pwd1" placeholder="请确认密码" type="password"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name" v-show="title==='用户注册'">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age" v-show="title==='用户注册'">
          <el-input v-model="form.age" placeholder="请输入年龄" />
        </el-form-item>
      </el-form>
        <div v-show="showPwdInput||title==='用户注册'">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
  </el-dialog>
</template>
  
  <script setup>
  import {  computed, ref } from 'vue'
import router from '../router'
import {userLogin,forgotPwd,userRegister,userInfo} from '../api/login'

  const account=ref(localStorage.getItem('account') || '')
  const password=ref(localStorage.getItem('pwd') || '')
  let key=Math.random()
  localStorage.setItem('key', key)
  const checkCode=ref('')
  let captchaUrl=ref('http://localhost:1234/captcha?key='+key)
  const open=ref(false)
  const title=ref('')
  const rememberMe=ref(false)
  const form = ref({
    number: '',
    author: '',
    pwd: '',
    pwd1: '',
    name: '',
    age: '',
  })
  const pwdLabel=ref('')
 // 刷新验证码图片
 function refreshCode() {
  key=Math.random()
  localStorage.setItem('key', key)
  captchaUrl='http://localhost:1234/captcha?key='+key
  checkCode.value=''
}
 
  const showPwdInput = computed(() => {
    return form.value.author === '俞文坤'
  })

  const login = () => {
    userLogin({account: account.value, password: password.value, verCode:checkCode.value}).then(res => {
      if (res.data==1){
        userInfo(account.value).then(re => {
          localStorage.setItem('userId', re.data.id)
          localStorage.setItem('userAccount', re.data.account)
          localStorage.setItem('username', re.data.name)
          alert(localStorage.getItem('username')+'，欢迎回来！')
        }
        ).catch(err => {
          console.log(err)
        })
        localStorage.setItem('token', account.value)
        localStorage.removeItem('key',key)
        
        router.push({name: 'Layout'})
        alert("登录成功！")
        if(rememberMe.value){
          localStorage.setItem('account', account.value)
          localStorage.setItem('pwd', password.value)
        }else{
          localStorage.removeItem('account')
          localStorage.removeItem('pwd')
        }
        }
      else if(res.data==0){
        refreshCode()
        alert("账号或密码错误！")
      }else{
        refreshCode()
        alert("验证码错误！")
      }
      console.log(res)
    }).catch(err => {
      console.log(err)
      refreshCode()
      alert("账号或密码错误！")
    })
  }

  const handleForgotPassword = () => {
    open.value = true
    title.value = '忘记密码'
    form.value.author = ''
    form.value.number = ''
    form.value.pwd = ''
    form.value.pwd1 = ''
    form.value.name = ''
    form.value.age = ''
    pwdLabel.value = '新密码'
  }
  const register = () => {
    open.value = true
    title.value = '用户注册'
    form.value.author = ''
    form.value.number = ''
    form.value.pwd = ''
    form.value.pwd1 = ''
    form.value.name = ''
    form.value.age = ''
    pwdLabel.value = '密码'
  }

  const cancel = () => {
    open.value = false
  }

  const submitForm = () => {
    if (form.value.pwd !== form.value.pwd1) {
      alert('两次输入的密码不一致！')
      return
    }
    if(title.value==='用户注册'){
      userRegister({
        account: form.value.number,
        password: form.value.pwd,
        name: form.value.name,
        age: form.value.age,
        isStudent: 0
      }).then(res => {
        alert('注册成功！')
        open.value = false
      }).catch(err => {
        console.log(err)
        alert('注册失败！')
      })
    }
    else{
      //修改密码
    forgotPwd({
      account: form.value.number,
      password: form.value.pwd,
    }).then(res => {
      alert('密码修改成功！')
      open.value = false
    }).catch(err => {
      console.log(err)
      alert('未找到该用户！')
    })
    }
    
  }


</script>


<style>
/* 为输入框添加通用样式 */
.el-input {
  width: 100%; /* 让输入框自适应容器宽度 */
  margin-bottom: 10px; /* 输入框间的垂直间距 */
  margin-bottom: 10px;/* 增加输入框之间的距离 */
}

/* 自定义占位符文本颜色和字体大小 */
.el-input__inner::placeholder {
  color: #999; /* 占位符颜色 */
  font-size: 14px; /* 字体大小 */
}

/* 输入框聚焦时的样式 */
.el-input:focus .el-input__inner {
  border-color: #2db7f5; /* 边框颜色 */
  box-shadow: 0 0 0 2px rgba(45, 183, 245, 0.2); /* 输入框阴影 */
}

/* 输入框内文本样式 */
.el-input__inner {
  font-size: 16px; /* 文本字体大小 */
  color: #333; /* 文本颜色 */
  height: 40px; /* 输入框高度 */
  border-radius: 4px; /* 边框圆角 */
}

.login-form {
  width: 380px;
  background-color: #f5f5f5; /* 设置背景色 */
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.login-form h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}
.long-button {
    width: 100%; /* 或者指定一个具体的宽度，如：width: 300px; */
    margin-top: 15px; /* 增加按钮与输入框的距离 */
  }
  .container {
  display: flex;
  justify-content: space-between; /* 这一行确保元素在容器中左右分布 */
  align-items: center; /* 这一行确保元素垂直居中 */
}

.forgot-password {
  margin-left: auto; /* 将链接推到右侧 */
  margin-left: 10px; /* 设置与复选框之间的间距 */
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
.captcha {
  cursor: pointer;
}
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 或者你想要的高度 */
}
</style>